<template>
  <div class="left">
    <div>{{count}}</div>
    <div>
      <button @click="add()">点击+1</button>
    </div>
    <div>{{state}}</div>
    <div>
      <button @click="add1()">点击+1</button>
    </div>
    <div>{{user}}</div>
    <div>
      <button @click="changeAge()">更改年龄</button>
    </div>
    <div>{{book}}</div>
  </div>
</template>

<script setup>
import { ref, isRef, shallowRef, reactive } from 'vue'
//响应式ref函数 一般用ref用来定义基本数据类型
//数字、布尔、字符串...这些都属于基本数据类型

//本身是一个基本数据类型 把它给包装成ref对象了
let count = ref(0);
const add = () => {
  count.value++;
  console.log("-------------add:", count.value);
}
//isRef  判断是不是一个ref对象
let str1 = "hello";
let str2 = ref("你好");
console.log("-------str1:", isRef(str1));
console.log("-------str2:", isRef(str2));
const state = shallowRef({ count: 1 })
const add1 = () => {
  //不会触发更改
  state.value.count = 2
  // 会触发更改
  //state.value = { count: 2 }
}
//reactive 来定义引入数据类型(复杂数据类型) 
const user = reactive({ name: 'zhangsan', age: 19 })
const changeAge = () => {
  user.age = 22;
}
//ref也能定义复杂数据类型
const book = ref({ name: 'H5', price: 99 })
const changeBook = () => {
  book.value.name = "CSS"
}
changeBook();

</script>

<style scoped>
.left {
  flex: 1;
  background: red;
}
</style>